﻿import React, { lazy, Suspense, useState } from 'react'
const LazyDemo = lazy(() => import('@/components/LazyDemo'))
// import smallImg from '@/assets/imgs/small.jpg'
// import bigImg from '@/assets/imgs/big.png'

// prefetch
const PreFetchDemo = lazy(
  () =>
    import(
      /* webpackChunkName: "PreFetchDemo" */
      /*webpackPrefetch: true*/
      '@/components/PrefetchDemo'
    )
)
// preload
const PreloadDemo = lazy(
  () =>
    import(
      /* webpackChunkName: "PreloadDemo" */
      /*webpackPreload: true*/
      '@/components/PreloadDemo'
    )
)

function App() {
  const [count, setCounts] = useState('')
  const [show, setShow] = useState(false)
  const onChange = (e: any) => {
    setCounts(e.target.value)
  }
  const onClick = () => {
    import('./app.css')
    setShow(true)
  }
  return (
    <>
      {/* <img src={smallImg} alt="小的图片" />
      <img src={bigImg} alt="大的图片" /> */}
      {/* 小图片背景容器 */}
      <div className="smallImg"></div>
      {/* 大图片背景容器 */}
      <div className="bigImg"></div>
      <h2>webpack5+react+ts</h2>
      <p>受控组件</p>
      <input type="text" value={count} onChange={onChange} />
      <br />
      <p>非受控组件</p>
      <input type="text" />
      <h2 onClick={onClick}>展示</h2>
      {/* show为true时加载LazyDemo组件 */}
      {/* {show && (
        <Suspense fallback={null}>
          <LazyDemo />
        </Suspense>
      )} */}
      {/* show为true时加载组件 */}
      {show && (
        <>
          <Suspense fallback={null}>
            <PreloadDemo />
          </Suspense>
          <Suspense fallback={null}>
            <PreFetchDemo />
          </Suspense>
        </>
      )}
    </>
  )
}
export default App
